<%@taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
<script type="text/javascript" charset="utf-8" src="js/jquery.listnav.min-2.1.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.dataTables.listnav.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" charset="utf-8">
	$(document).ready(function() {
		$('.spinner').spinner({min: 0, max: 100, increment: 1});
		
	});
</script>
<sx:head />
<div class="container-fluid">
	<div class="content">
		<div class="row-fluid">
			<s:form id="create-service" action="addService" cssClass='validate form-horizontal' method="post" theme="simple">
				<div class="span12">
					<h3>Create Service</h3>
					<div class="box">
						<div class="box-head tabs">
							<div style="width: 273px;">
								<h3>Create Service</h3>
								<ul id="service-tab" class="nav nav-tabs"
									style="float: left; margin-top: 10px;">
									<li class='active'><a href="#detail-1" data-toggle="tab">Details1</a></li>
									<li><a href="#detail 2" data-toggle="tab">Details 2</a></li>										
									<li><a href="#detail 3" data-toggle="tab">Details 3</a></li>										
		 						</ul>											
							</div>
							<div style="float: right;">
								<ul style="list-style: none; margin: 10px 0 0 0;">							
									<li style="float: left; margin-right: 10px;"><button id="save-service" class="btn btn-success" type="submit">Save</button></li>
									<li style="float: left; margin-right: 10px;"><a id="back" href="listService.action" class="btn btn-success">Back</a></li>
								</ul>
							</div>
						</div>
						<div class="box-content" id="organisation">
							<div class="tab-content">
								<div class="tab-pane active" id="detail-1">							
									<div class="span3">
										<div class="control-group">
											<label for="req" class="control-label require">Service Name</label>
											<div class="controls">
												<s:textfield id="name" name="service.name"></s:textfield>
											</div>
										</div>
										<div class="control-group">
											<label for="req" class="control-label">Service Short Description</label>
											<div class="controls">
												<s:textarea style="resize: none;" id="short-description" name="service.shortDescription"></s:textarea>
											</div>
										</div>
										<div class="control-group">
											<label for="req" class="control-label">Sub Type</label>
											<div class="controls">
												<s:select list="listSubType" headerKey="-1" headerValue=""></s:select>
											</div>
										</div>
										<div class="control-group">
											<label for="req" class="control-label require">Lead Contact</label>
											<div class="controls">
												<input type="text" name="contact" id="contactname-lookup"
												class='input-medium input-square' disabled="disabled">
												
												<input type="hidden" name="contactIden" id="contactId"> 
												<a id="lookup-contact" data-toggle="modal" href="#lookUpContact">Lookup</a>
											</div>
										</div>
										<div class="control-group">
											<label for="req" class="control-label">Client Description</label>
											<div class="controls">
												<s:textarea style="resize: none;" id="client-description" name="service.clientDescription"></s:textarea>
											</div>
										</div>
										<div class="control-group">
											<label for="req" class="control-label">Service Attendance</label>
											<div class="controls">
												<s:select list="listAttendance" headerKey="-1" headerValue=""></s:select>
											</div>
										</div>
										<div class="control-group">
											<label for="req" class="control-label">Service Start Expected</label>
											<div class="controls">
												<sx:datetimepicker name="startExpected" displayFormat="dd-MMM-yyyy" />
											</div>
										</div>
										<div class="control-group">
											<label for="req" class="control-label">Service Start Date</label>
											<div class="controls">
												<sx:datetimepicker name="startDate" displayFormat="dd-MMM-yyyy" />
											</div>
										</div>
										<div class="control-group">
											<label for="req" class="control-label">Service End Date</label>
											<div class="controls">
												<sx:datetimepicker name="endDate" displayFormat="dd-MMM-yyyy" />
											</div>
										</div>
										<div class="control-group">
											<label for="req" class="control-label">Service Extendable</label>
											<div class="controls">
												<s:checkbox id="active" name="service.extendable"></s:checkbox>
											</div>
										</div>
										<div class="control-group">
											<div style="float:left; width:35%;">
												<label for="spinnn" class="control-label">Year</label>
												<div class="controls">
													<div class="input-mini">
														<s:textfield value="0" id="extendYear" name="extendYear" cssClass='spinner' ></s:textfield>
													</div>
												</div>
											</div>
											<div style="float:left;">
												<label for="spinnn" class="control-label">Month</label>
												<div class="controls">
													<div class="input-mini">
														<s:textfield value="0" id="extendMonth" name="extendMonth" cssClass='spinner' ></s:textfield>
													</div>
												</div>
											</div>
										</div>
									</div>
									<div class="span3">
										<div class="control-group">
											<label for="req" class="control-label">Service Active</label>
											<div class="controls">
												<s:checkbox id="active" disabled="true" name="service.active" theme="simple"></s:checkbox>
											</div>
										</div>
										<div class="control-group">
											<label for="req" class="control-label">Service Full Description</label>
											<div class="controls">
												<s:textarea style="resize: none;" id="full-description" name="service.fullDescription"></s:textarea>
											</div>
										</div>
										<div class="control-group">
											<label for="req" class="control-label require">Dept Code</label>
											<div class="controls">
												<s:textfield id="dept-code" name="service.deptCode"></s:textfield>
											</div>
										</div>
										<div class="control-group">
											<label for="req" class="control-label require">Service Type</label>
											<div class="controls">
												<s:select list="listServiceType" headerKey="-1" headerValue="" listKey="id" listValue="name" ></s:select>
											</div>
										</div>
										<div class="control-group">
											<label for="req" class="control-label">Service Description Delivery</label>
											<div class="controls">
												<s:textarea style="resize: none;" id="delivery" name="service.delivery"></s:textarea>
											</div>
										</div>
										<div class="control-group">
											<label for="req" class="control-label">Contract Code</label>
											<div class="controls">
												<s:textfield id="contract-code" name="service.contractCode"></s:textfield>
											</div>
										</div>
										<div class="control-group">
											<label for="req" class="control-label">Contract Value</label>
											<div class="controls">
												<s:textfield id="contract-value" name="service.contractValue"></s:textfield>
											</div>
										</div>
										<div class="control-group">
											<label for="req" class="control-label">Staged Payment</label>
											<div class="controls">
												<s:checkbox id="contract-staged-payment" name="service.contractStagedPayment"></s:checkbox>
											</div>
										</div>
										<div class="control-group">
											<label for="req" class="control-label">Referal Process/Method</label>
											<div class="controls">
											</div>
										</div>
										<div class="control-group">
											<label for="req" class="control-label">Service Time Limited</label>
											<div class="controls">
												<s:checkbox id="service-time-limited" name="service.serviceTimeLimited"></s:checkbox>
											</div>
										</div>
										<div class="control-group">
											<div style="float:left; width:35%;">
												<label for="spinnn" class="control-label">Year</label>
												<div class="controls">
													<div class="input-mini">
														<s:textfield value="0" id="limitYear" name="limitYear" cssClass='spinner' ></s:textfield>
													</div>
												</div>
											</div>
											<div style="float:left;">
												<label for="spinnn" class="control-label">Month</label>
												<div class="controls">
													<div class="input-mini">
														<s:textfield value="0" id="limitMonth" name="limitMonth" cssClass='spinner' ></s:textfield>
													</div>
												</div>
											</div>
									</div>
								</div>										
							 	<div class="tab-pane" id="detail-2"></div> 
							 	<div class="tab-pane" id="detail-3"></div> 
							</div>
						</div>
					</div>
				</div>
			</s:form>
		</div>
	</div>
</div>
	<!-- Type Business -->
	<div id="pageLookupBusinessType"> 
		<%@ include file="LookupBusinessType.jsp" %>
	</div>
	
	<!-- Contact -->

	<div id="pageLookUpContact"> 
		<%@ include file="lookUpContact.jsp" %>
	</div>
	
	<!-- Postcode -->
	<div id="pageLookupPostcode">
		<%@ include file="lookUpPostcode.jsp" %>
	</div>
